<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head><script type="text/javascript" src="/utils/scripts/flat-ui.js"></script><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><link rel="shortcut icon" href="/utils/image/favicon.ico" type="image/x-icon" />
	<meta charset="UTF-8">
	<title>学生信息管理系统</title>
	<script type="text/javascript" src="/utils/js/jquery-3.3.1.min.js"></script>
	<!-- Loading Bootstrap -->
	<link href="/utils/css/vendor/bootstrap.min.css" rel="stylesheet">
	<!-- Loading Flat UI Pro -->
	<link href="/utils/css/flat-ui.css" rel="stylesheet">
	<!-- Loading Flat UI JS -->
	<script type="text/javascript" src="/utils/scripts/flat-ui.min.js"></script>

	<script type='text/javascript' src='/utils/scripts/particles.js'></script><link href="/utils/css/animate.css" rel="stylesheet"></head>
<body><div id="particles-js"><canvas class="particles-js-canvas-el" width="1322" height="774" style="width: 100%; height: 100%;"></canvas></div>
<jsp:include page="adminLeft.jsp" />
<div class="container">
	<div class="row">
		<div class="col-md-6">
			<h5>添加课程</h5>
			<form action="/collegeServlet.do?flag=add" method="post" name="form1">
				<h6>课程编号</h6>
				<input type="text" name="cid" id="cid" class="form-control" oninput = "value=value.replace(/[^\d]/g,'')" maxlength="5"></input>

				<span id="countt" style="color: #ff0000;"></span>


				<h6>课程名称</h6>
				<input type="text" name="cname" class="form-control" onkeyup="this.value=this.value.replace(/(^\s+)|(\s+$)/g,'');" maxlength="10"></input>
				<h6>课程简介</h6>
				<textarea name="cintroduction" cols="20" rows="6"
						  class="form-control"></textarea>

				<h6>课程类型</h6>
				<select name="type"
						class="form-control select select-primary select-block mbl">
					<option value="必修">必修</option>
					<option value="选修">选修</option>
				</select>

				<h6>系名称</h6>
				<select name="belongcoll" class="form-control select select-primary select-block mbl" id="belongcoll"
						onchange="getMajor();">
					<option value="-1">--请选则院系--</option>
				</select>

				<h6>专业名称</h6>
				<select name="belongpro"
						class="form-control select select-primary select-block mbl" id="belongpro">
					<option value="-1">--请选则专业--</option>
				</select> <br> <input type="submit" value="添加"
									  class="btn btn-primary btn-wide login-btn" />
			</form>

		</div>
	</div>
</div>

<script type="text/javascript">

	/**
	 * 页面打开的时候加载一级下拉框
	 */
	function getColleges() {
		//Ajax异步请求
		var xhr=new XMLHttpRequest();
		xhr.onreadystatechange=function () {
			if(xhr.readyState==4&&xhr.status==200){
				//返回的集合
				var result=xhr.responseText;
				//[{"id":1,"title":"计算机学院"},{"id":2,"title":"建筑学院"},{"id":3,"title":"外国语学院"},{"id":4,"title":"人文学院"},{"id":5,"title":"机械学院"}]
				//把获取到的JSON字符串转为JS的对象
				var colleges=JSON.parse(result);
				for(var i=0;i<colleges.length;i++){
					//alert(colleges[i].title);
					var option=document.createElement("option");
					option.value=colleges[i].id;
					option.text=colleges[i].title;
					//加载学院下拉框
					document.getElementById("belongcoll").append(option);
				}
			}
		};
		var url="/collegeServlet.do?flag=getColleges";
		xhr.open("get",url,true);
		xhr.send();
	}

	window.onload=function () {
		//页面打开的时候加载一级下拉框
		getColleges()
	};

	//加载二级下拉框
	function getMajor() {
		//清空源码原始下拉框，把option长度清0
		document.getElementById("belongpro").length=0;
		//获取到一级下拉框选中ID
		var collegeId=document.getElementById("belongcoll").value;
		//alert(collegeId);
		if(collegeId==-1){
			return;
		}
		var xhr=new XMLHttpRequest();
		xhr.onreadystatechange=function () {
			if(xhr.readyState==4&&xhr.status==200){
				//返回的集合
				var result=xhr.responseText;
				//把获取到的JSON字符串转为JS的对象
				var majors=JSON.parse(result);
				for(var i=0;i<majors.length;i++){
					var option=document.createElement("option");
					option.value=majors[i].id;
					option.text=majors[i].mname;
					//加载学院下拉框
					document.getElementById("belongpro").append(option);
				}
			}
		};
		var url="/majorServlet.do?flag=getMajors&collegeId="+collegeId;
		xhr.open("get",url,true);
		xhr.send();

	}


</script>

<script>
	$("select").select2({
		dropdownCssClass : 'dropdown-inverse'
	});
</script>
<script type="text/javascript" src="/utils/scripts/flat-ui.js"></script><script src="/utils/scripts/bganimation.js"></script></body>
</html>